<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%--
  Created by IntelliJ IDEA.
  User: lwx
  Date: 2018/3/25
  Time: 21:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/register.css">
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/login.js"></script>
</head>
<body>
<!--头部-->
<div id="top">
    <div class="top">
        <!--标题-->
        <div id="leftTop">
            <a class="logo" href="#">
                <img src="../image/logo.jpg" alt="logo"/>
            </a>
            <!--大标题-->
            <ul class="nav">
                <li><a class="active" href="/jsp/index.jsp">首页</a></li>
                <li><a href="#">榜单</a></li>
                <li><a href="/jsp/songs.jsp">歌手</a></li>
                <li><a target="_blank" href="#">下载贪玩客户端</a></li>
            </ul>
            <!--小标题-->
            <div class="tools">
                <div class="search">
                    <input type="text" placeholder="找到好音乐">
                </div>
                <ul class="choose">
                    <li class="show">
                        <a href="/jsp/ZhiBoTest.jsp">贪玩直播</a>
                    </li>
                    <li class="earphone">
                        <a href="javascript:void(0);">贪玩耳机</a>
                    </li>
                    <li class="vip">
                        <a href="javascript:void(0);">VIP会员</a>
                    </li>
                    <li class="book">
                        <a href="javascript:void(0);">i听</a>
                    </li>
                </ul>
                <div class="userBox">
                    <c:choose>
                        <c:when test="${user != null}">
                            <c:set var="userName" value="${user.phone}"></c:set>
                            <span id="music"></span><a id="userName" href="javascript:void(0);">
                                ${fn:substring(userName,0,3)}...${fn:substring(userName,fn:length(userName) - 2,fn:length(userName))}
                            </a>
                            <div class="loginMenu">
                                <a href="javascript:void(0);" class="logout" onclick="loginOut()">
                                    <i></i>退出
                                </a>
                            </div>
                        </c:when>
                        <c:otherwise>
                            <div id="user">
                                <a id="loginBtn" href="javascript:void(0);" onclick="$('#login').show();">登录</a>
                                <a href="javascript:void(0);">|</a>
                                <a id="registerBtn" href="javascript:void(0);" onclick="$('#register').show();">注册</a>
                            </div>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
        </div>
    </div>
</div>
<!--登录-->
<div id="login">
    <div class="ugcBox">
        <div class="topBox">
            <h1>登录</h1>
            <a href="javascript:void(0);" class="closeWindow" id="loginClose" onclick="$('#login').hide();"></a>
        </div>
            <div class="left">
                <span class="label">酷我账号登录</span>
                <input id="loginName" type="text" placeholder="酷我账号" name="loginName" class="intInput">
                <input id="loginPwd" type="password" placeholder="密码" name="loginPwd" class="intInput">
                <input id="loginCode" type="text" placeholder="验证码" name="verifyCode" class="intInput verifyCode">
                <canvas id="canvas" width="120" height="40" onclick="drawPic()"></canvas>
                <div class="bot">
                    <input id="loginCheck" type="checkbox" checked="checked" class="command">&nbsp;&nbsp;
                    <label>同意
                        <a href="javascript:void(0);">《贪玩音乐用户服务协议》</a>
                    </label>
                </div>
                <div class="warn hidden" id="loginWarn"></div>
                <a href="javascript:void(0);" class="sureUp radius20" onclick="login()">登录</a>
            </div>
        <div class="right">
            <span class="label">第三方登录</span>
            <a href="javascript:void(0);" class="xinlang radius20">
                <i></i>
                <span>新浪微博登录</span>
            </a>
            <a href="javascript:void(0);" class="qqLogin radius20">
                <i></i>
                <span>QQ登录</span>
            </a>
        </div>
    </div>
</div>
<!--注册-->
<div id="register">
    <div class="ugcBox">
        <div class="topBox">
            <h1>注册</h1>
            <a href="javascript:void(0);" class="closeWindow" id="rigisterClsoe" onclick="$('#register').hide();"></a>
        </div>
            <div class="left">
                <input id="resPhone" type="text" placeholder="手机号" name="uName" class="intInput">
                <input id="resPwd" type="password" placeholder="密码" name="password" class="intInput">
                <input id="resRePwd" type="password" placeholder="确认密码" name="password" class="intInput">
                <input id="resCode" type="text" placeholder="验证码" name="verifyCode" class="intInput verifyCode">
                <input id="resReCode" type="button" value="获取验证码" class="regBtn" onclick="sendMsg()">
                <div class="bot">
                    <input id="resCheck" type="checkbox" checked="checked" class="command">&nbsp;&nbsp;
                    <label>同意
                        <a href="javascript:void(0);">《贪玩音乐用户服务协议》</a>
                    </label>
                </div>
                <div class="warn hidden" id="registerWarn"></div>
                <a href="javascript:void(0);" class="sureUp radius20" onclick="register()">注册</a>
            </div>
        <div class="right">
            <span class="label">第三方登录</span>
            <a href="javascript:void(0);" class="xinlang radius20">
                <i></i>
                <span>新浪微博登录</span>
            </a>
            <a href="javascript:void(0);" class="qqLogin radius20">
                <i></i>
                <span>QQ登录</span>
            </a>
        </div>
    </div>
</div>
</body>
</html>